<template>
	<base-page title="反馈与建议" navbarBgColor="white">
		<view class="mt-20 mx-16 overflow-auto">
			<view class="fs-14 leading-20">
				<text class="text-color-regular font-semibold">反馈内容</text>
				<text class="text-color-hint font-normal">（{{contentLength}}/200）</text>
			</view>
			<view class="mt-8 radius-12 px-12 py-16 bg-white">
				<textarea class="w-full fs-14" v-model="formData.content" maxlength="200" placeholder="*请输入10字以上的反馈内容，以便我们为您提供更好的服务。"></textarea>
				<view class="mt-8" style="display:grid;grid-template-columns:repeat(auto-fill, 80px);grid-row-gap:8px;grid-column-gap:8px;">
					<view v-for="(item,i) in files" :key="i" class="relative" style="width:80px;height:80px;">
						<image class="h-full w-full" :src="item"></image>
						<image class="absolute size-20" style="top:0;right:0;" src="@/static/svg/publish/icon-delete.svg" @click="toDeleteFile(item, i)"></image>
					</view>
					<view v-if="files.length<10" class="inline-flex justify-center relative" style="width:80px;height:80px;" @click="toChooseImage">
						<image class="h-full w-full" src="@/static/image/add-photo.png"></image>
						<text class="absolute leading-17 fs-12 text-color-hint" style="bottom:5px;">相关截图</text>
					</view>
				</view>
			</view>
			<view class="mt-20 radius-12 bg-white fs-14">
				<view class="pl-20 pr-14 flex item-center" style="height:60px;">
					<text class="text-color-regular">联系方式</text>
					<text class="text-color-hint ml-8">(选填，便于我们与您联系)</text>
				</view>
				<view class="h-1 bg-default"></view>
				<view class="pl-20 pr-14 flex item-center" style="height:60px;">
					<text class="text-color-regular" style="width:80px;">联系人</text>
					<input v-model="formData.contacts" class="flex-1" placeholder="请输入我们称呼您的方式" placeholder-class="text-color-hint" />
				</view>
				<view class="h-1 bg-default"></view>
				<view class="pl-20 pr-14 flex item-center" style="height:60px;">
					<text class="text-color-regular" style="width:80px;">联系电话</text>
					<input v-model="formData.mobile" class="flex-1" placeholder="请输入您的联系电话" placeholder-class="text-color-hint" />
				</view>
			</view>
			<view class="mt-20 flex item-center leading-20 color-primary">
				<view class="flex-1 inline-flex center">
					<text class="p-10 fs-14" @click="toFeedbackRecord">反馈记录</text>
				</view>
				<view class="h-13 w-1 bg-primary"></view>
				<view class="flex-1 inline-flex center">
					<button open-type="contact" class="flex center px-0 fs-14 font-normal color-primary" style="background-color:transparent;border:none;">官方客服</button>
				</view>
			</view>
		</view>
		<template #footer>
			<view class="mx-12 mb-12 radius-8 h-46 flex center text-white fs-16" :class="enableSubmit? 'bg-primary' : 'bg-disabled'" @click="toSubmit">提交</view>
		</template>
	</base-page>
</template>

<script setup name="Feedback">
	import { ref, unref, computed, watch } from 'vue'
	import { checkPhoneNumber, debounce } from '@/utils/index.js'
	import { feedbackSaveApi } from '@/pagesA/api/feedback.js'
	import { uploadFileApi } from '@/api/common.js'
	
	const formData = ref({
		content: '',
		imgs: '',
		contacts: '',
		mobile: ''
	})
	
	const files = ref([])
	
	const contentLength = ref(0)
	watch(
			()=>formData.value.content,
			(v)=>{
					contentLength.value = v.length || 0
					if (contentLength.value > 200)
							contentLength.value = 200
			},
	)
	const toChooseImage = () => {
		uni.chooseMedia({
			count: 10 - files.value.length,
			mediaType: ['image'],
			sourceType: ['album', 'camera'],
			success: ({ tempFiles }) => {
				for (let i = 0; i < tempFiles.length; i++) {
					const file = tempFiles[i]
					if (files.value.length < 10) {
						files.value.push(file.tempFilePath)
					} else {
						break
					}
				}
			}
		})
	}
	
	const uploadFile = (file) => {
		uni.showLoading()
		uploadFileApi(4, {
			name: 'file',
			filePath: file.tempFilePath
		}).then(res => {
			uni.hideLoading()
			if (res.code === 200) {
				files.value.push(res.data)
			} else {
				uni.showToast({
					icon: 'none',
					title: res.message
				})
			}
		}).catch(err => uni.hideLoading())
	}
	
	const toDeleteFile = (item, index) => {
		files.value.splice(index, 1)
	}
	
	const toFeedbackRecord = () => {
		uni.navigateTo({
			url: '/pagesA/feedback/feedback-record'
		})
	}
	
	const resetForm = () => {
		formData.value = {
			content: '',
			imgs: '',
			contacts: '',
			mobile: ''
		}
		files.value = []
	}
	
	const enableSubmit = computed(() => {
		return formData.value.content && formData.value.content.trim().length
	})
	
	const toSubmit = debounce(async () => {
		// console.log('提交', formData.value, files.value)
		if (!enableSubmit.value) {
			return
		}
		if (formData.value.mobile && !checkPhoneNumber(formData.value.mobile)) {
			uni.showToast({
				icon: 'none',
				title: '请输入正确的联系电话'
			})
			return
		}
		try {
			uni.showLoading()
			if (files.value && files.value.length) {
				const ossUrl = []
				for (let i = 0; i < files.value.length; i++) {
					const res = await uploadFileApi(4, {
						name: 'file',
						filePath: files.value[i]
					})
					if (res.code === 200) {
						ossUrl.push(res.data)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				}
				formData.value.imgs = ossUrl.join(',')
			}
			
			feedbackSaveApi(unref(formData)).then(res => {
				uni.hideLoading()
				uni.showToast({
					icon: 'success',
					title: '提交成功'
				})
				resetForm()
			})
		}catch(e){
			uni.hideLoading()
		}
	}, 1000)
</script>
